import React from 'react';
import {createAppContainer} from 'react-navigation';
import {Image, View} from 'react-native';
import NavigationUtil from './../navigators/NavigationUtil';
import SafeAreaViewPlus from '../common/SafeAreaViewPlus';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import Home from './Home/Home';
import Map from './Map/Map';
import Msg from './Msg/Msg';
import Mine from './Mine/Mine';
import StorageUtil from "../utils/StorageUtil";
import {Constant} from "../common/Constant";

class IndexPage extends React.Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount() {
        this._isLogin()
    }

    async _isLogin() {
        const token = await StorageUtil.get(Constant.token);
        const {navigation} = this.props;
        if (!token) {
            if (!NavigationUtil.navigation) {
                NavigationUtil.navigation = navigation;
            }
            // navigation.navigate('Main');
            // NavigationUtil.goPage('Main');
            navigation.navigate('Login');
        }
    }

    render() {
        NavigationUtil.navigation = this.props.navigation;
        const Tab = createAppContainer(this._tabNavigator());
        return (
            <SafeAreaViewPlus>
                <Tab />
            </SafeAreaViewPlus>
        );
    }

    _tabNavigator() {
        return createBottomTabNavigator(
            {
                Home: {
                    screen: Home,
                    navigationOptions: {
                        tabBarLabel: '首页',
                        tabBarIcon: ({tintColor, focused}) => {
                            const img = focused?require('../assets/index/home_active.png'):require('../assets/index/home.png')
                            return (<Image source={img} style={{width: 25, height: 25}}/>);
                        },
                    },
                },
                Notice: {
                    screen: Msg,
                    navigationOptions: {
                        tabBarLabel: '融合通信',
                        tabBarIcon: ({tintColor, focused}) => {
                            const icon = focused
                                ? require('../assets/index/msg_active.png')
                                : require('../assets/index/msg.png');
                            return (
                                <View>
                                    <Image source={icon} style={{width: 25, height: 25 }} />
                                </View>
                            );
                        },
                    },
                },
                DealtWith: {
                    screen: Map,
                    navigationOptions: {
                        tabBarLabel: '地图',
                        tabBarIcon: ({tintColor, focused}) => {
                            const icon = focused
                                ? require('../assets/index/map_active.png')
                                : require('../assets/index/map.png');
                            return (
                                <View>
                                    <Image
                                        source={icon}
                                        style={{width: 25, height: 25}}
                                    />
                                </View>
                            );
                        },
                    },
                },
                Account: {
                    screen: Mine,
                    navigationOptions: {
                        tabBarLabel: '我的',
                        tabBarIcon: ({tintColor, focused}) => {
                            const img = focused?require('../assets/index/mine_active.png'):require('../assets/index/mine.png')
                            return (<Image source={img} style={{width: 25, height: 25}}/>);
                        },
                    },
                },
            },
            {
                backBehavior: 'none',
                tabBarOptions: {
                    activeTintColor: '#26AEFF',
                    style:{
                        height: 55
                    }
                },
            },
        );
    }
}
export default IndexPage;
